<template>
  <div>
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>日志管理</el-breadcrumb-item>
      <el-breadcrumb-item>系统日志</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图区域 -->
    <el-card>
      <!-- 搜索区域 -->
      <el-row :gutter="10">
        <el-col :span="4">
          <el-select v-model="queryInfo.name" clearable placeholder="请选择用户名" filterable allow-create >
            <el-option
              v-for="item in nameOptions"
              :key="item"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="5">
          <el-input v-model="queryInfo.msg" clearable placeholder="请输入日志内容">
          </el-input>
        </el-col>
        <el-col :span="10">
          <el-date-picker
            v-model="dateRange"
            value-format="yyyy-MM-ddTHH:mm:ss"
            type="datetimerange"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right"
            style="width: 100%"
            format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </el-col>
        <el-col :span="3">
          <el-select v-model="queryInfo.status" placeholder="请选择日志状态">
            <el-option
              v-for="item in statusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="2">
          <el-button icon="el-icon-search" @click="getLogList" >搜索</el-button>
        </el-col>
      </el-row>
    </el-card>

    <el-card>
      <!-- 日志列表区域 -->
      <el-table :data="logList" border stripe>
        <el-table-column type="index"></el-table-column>
        <el-table-column label="id" prop="id" v-if="false"></el-table-column>
        <el-table-column label="用户名" prop="name" width="100px"></el-table-column>
        <el-table-column label="日志内容" prop="msg" width="500px"></el-table-column>
        <el-table-column label="日期" prop="date" width="170px">
          <template slot-scope="scope">
            {{ scope.row.date.replace("T", " ") }}
          </template>
        </el-table-column>
        <el-table-column label="状态" width="100px">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.status">成功</el-tag>
            <el-tag type="danger" v-else>失败</el-tag>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page="queryInfo.page" :page-sizes="[5, 10, 20, 50, 100]" :page-size="queryInfo.size"
                     layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </el-card>

  </div>
</template>

<script>
export default {
  name: "LogManage",
  data() {
    return {
      // 日志查询条件
      queryInfo: {
        name: '',
        msg: '',
        date: '',
        status: null,
        page: 1,
        size: 10
      },
      // 日期选择器绑定值
      dateRange: '',
      nameOptions: ['系统消息'],
      pickerOptions: {
        shortcuts: [{
          text: '最近一天',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', [start, end]);
          }
        },{
          text: '最近三天',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
            picker.$emit('pick', [start, end]);
          }
        },{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      statusOptions: [{
        label: '所有',
        value: null
      },{
        label: '成功',
        value: true
      },{
        label: '失败',
        value: false
      }],
      // 日志信息表
      logList: [],
      total: ''
    }
  },
  created() {
    this.getLogList()
  },
  methods:{
    getLogList(){
      let date = this.dateRange;
      if (date){
        this.queryInfo.date = date[0] + " " + date[1]
      }else {
        this.queryInfo.date = ''
      }
      // console.log(this.queryInfo)
      this.$http.post("driver/log/selectLog", this.queryInfo).then(res => {
        if (res.data.code === 200) {
          this.total = res.data.data.total
          this.logList = res.data.data.logList
        } else {
          this.$message.error(res.data.message)
        }
      }).catch(err => {
        console.log(err)
        this.$message.error(err.message)
      })
    },
    // 监听 size 改变的事件
    handleSizeChange(size) {
      this.queryInfo.size = size
      this.getLogList()
    },
    // 监听 page 改变的事件
    handleCurrentChange(page) {
      this.queryInfo.page = page
      this.getLogList()
    },
  }
}
</script>

<style scoped>

</style>
